<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title>大文件、大流量查询</title>
<@fm.header />
<style type="text/css">
body {
	font: 12px/20px "微软雅黑", "宋体", Arial, sans-serif, Verdana, Tahoma;
	padding: 0;
	margin: 0;
}
.layout-split-proxy-h{
	position:absolute;
	width:2px;
	background:#888;
	font-size:1px;
	cursor:e-resize;
	display:none;
	z-index:5;
}
.layout-split-north{
	border-bottom:5px solid #efefef;
}
.layout-split-south{
	border-top:5px solid #efefef;
}
.layout-split-east{
	border-left:0px solid #efefef;
}
.layout-split-west{
	border-right:0px solid #efefef;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
}
a:hover {
 text-decoration: underline;
}
a:active {
 text-decoration: none;
}
.cs-north {
	height:40px;
	overflow:hidden;
}
.cs-north-bg {
	width: 100%;
	height: 100%;
	background: url(/resources/js/easyui/themes/bootstrap/images/header_bg.png) repeat-x;
}
.cs-north-logo {
	height: 30px;
	margin: 10px 0px 20px 5px;
	display: inline-block;
	color:#0E2D5F;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
}
.cs-north-info {
	position: absolute;
	color: #777;
	top: 10px;
	right: 30px;
	display: inline-block;
}
</style>
<script>
function doSearchGrid(){  
	var startTime = $('#startTime').datebox('getValue');
	var endTime = $('#endTime').datebox('getValue');
	
	if (startTime != "" && endTime != "") {
		var sDay = startTime.substring(0,10);
		var eDay = endTime.substring(0,10);
		
		var sDate = new Date(sDay);      
	    var eDate = new Date(eDay);  
	    
	    if (sDate.getTime()-eDate.getTime() != 0) {
	    	alert("请选择同一天！");
	    	return false;
	    }
		
		var diff = GetDateDiff(startTime, endTime, "second");
		if (diff > 0) {
			alert("开始时间不能小于结束时间！");
			return false;
		}
	}
  
    $('#tt').datagrid('load', {    
        mark: $('#mark').val(),
        startTime: startTime,
        endTime: endTime,
        type: $('#type').combobox('getValue'),
        operator: $('#operator').combobox('getValue'),
        size: $('#size').val()
    });
}

function GetDateDiff(startTime, endTime, diffType) {
    //将计算间隔类性字符转换为小写
    diffType = diffType.toLowerCase();
    var sTime = new Date(startTime);      //开始时间
    var eTime = new Date(endTime);  //结束时间
    
    var divNum = 1;
    switch (diffType) {
        case "second":
            divNum = 1000;
            break;
        case "minute":
            divNum = 1000 * 60;
            break;
        case "hour":
            divNum = 1000 * 3600;
            break;
        case "day":
            divNum = 1000 * 3600 * 24;
            break;
        default:
            break;
    }
    return parseInt((sTime.getTime() - eTime.getTime()) / parseInt(divNum));
}
</script>
</head>
<body class="cmp-list-body">
	<div id="tb" style="padding:3px">
        <span>mark:</span>  
	 	<input id="mark" style="line-height:20px;border:1px solid #ccc">
		
        <span>开始时间:</span> 
        <input type="text" class="easyui-datebox" id="startTime"> </input>
        <span>结束时间:</span> 
        <input type="text" class="easyui-datebox" id="endTime"> </input>
        
        <span>类型:</span>
	    <select class="easyui-combobox" id="type" panelHeight="auto" style="width:155px" >
        	<option value="" >全部</option>
            <option value="2" >大文件</option>
        	<option value="1" >大流量</option>
        </select>
        
        <span>大小:</span>
	    <select class="easyui-combobox" id="operator" panelHeight="auto" style="width:155px" >
        	<option value="" >请选择</option>
            <option value="1" >>=</option>
        	<option value="2" ><=</option>
        </select>
        <input id="size" style="line-height:20px;border:1px solid #ccc">
        
    	<a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doSearchGrid();">查询</a> 
    	
	</div>
	<table id="tt" class="easyui-datagrid" title="大文件、大流量查询" iconCls="icon-save" 
		url="/flow/listGridJson" toolbar="#tb" rownumbers="true" idField="id"
		singleSelect="true" pagination="true" fitColumns="true" pageSize="15" pageList="[15,30,60,80,100]"> 
	    <thead>
	        <tr>
	            <th align="center" width="35%" field="mark">Mark</th>
	            <th align="center" width="25%" field="num">次数</th>
	            <th align="center" width="25%" field="total">总流量(M)</th>
	            <th align="center" width="25%" field="avg">平均流量(M)</th>
	            <th align="center" width="10%" field="time">时间</th>
	        </tr>
	    </thead>   
	</table>
</body>

</html>